<template>
	<view class="home">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
				<swiper-item @tap="openMemberDetailsAlarm(item.id)" v-for="(item, index) in swiper.list">
					<view class="swiper-item swiper-item-1 uni-bg-red">
						<image style="width: 750rpx;" :src="item.img" mode="center"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="member-list">
			<view @tap="openMemberDetailsAlarm(item.id)" class="bg-color-white member-list-item" v-for="(item, index) in members">
				
				
				<view class="clear mg-b20">
					
					<view class="fl w90 h90">
						<image style="width: 90rpx; height: 90rpx" :src="item.avatar" mode="aspectFit"></image>
					</view>
					
					<view class="h90 mg-l110">
						
						<view class="h100p pos-relative">
							
							<view class="f0 gender">
								<span class="color-blue f28 mg-r8 iconfont icon-male" v-if="item.gender === 2"></span>
								<span class="color-pink f28 mg-r8 iconfont icon-female" v-if="item.gender === 1"></span>
								<span class="color-gray-6 f28">{{ item.nickName }}</span>
							</view>
							
							<view class="f0 pos-abs b0 l0 region">
								<span class="color-purple f26 mg-r5 iconfont icon-location"></span>
								<span class="color-gray-6 f26">{{ item.region }}</span>
							
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="pic">
					<image class="w100p h400" :src="item.photo" mode="center"></image>
				</view>
				
				<view class="clear">
					<view class="fl">
						<view class="f0 h40 lh40">
							<span class="color-orange f26 mg-r8 iconfont icon-birthday"></span>
							<span class="color-gray-5 f26">{{ item.birth }}</span>
						</view>
					</view>
					<view class="f0 fr">
						<view class="fl h40 lh40 mg-r100">
							<span class="color-light-red f26 iconfont icon-height"></span>
							<span class="f26 color-gray-5">{{ item.height }}cm</span>
						</view>
						<view class="fl h40 lh40">
							<span class="color-light-blue f26 iconfont icon-weight"></span>
							<span class="f26 color-gray-5">{{ item.weight }}kg</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 会员详情弹窗 begin -->
		<memberDetailsAlarm ref="memberDetails"></memberDetailsAlarm>
		<!-- 会员详情弹窗 end -->
		
		<!--loading 动画 begin-->
		<transition name="el-fade-in">
			<loading ref="loading"></loading>
		</transition>
		<!-- loading 动画 end-->
	</view>
</template>

<script>
	import memberDetailsAlarm from './member-details'
	export default {
		name: "home",

		components: {
			memberDetailsAlarm
		},

		onShow() {
			console.log('列表页');
			console.log(this.$store.state);
			
		},

		data() {
			return {
				swiper: {
					indicatorDots: true, // 是否显示面板指示点
					indicatorColor: 'rgba(121, 111, 222, .5)',
					indicatorActiveColor: '#047ee8',
					autoplay: true,
					interval: 3000, // 自动播放间隔时长
					duration: 500, // 滑动动画时长,
					
					list: [
						{
							id: 1,
							img: '/static/image/mem/1.jpg',
							title: '宫水 三叶',
							url: '',
						},
						{
							id: 2,
							img: '/static/image/mem/2.jpg',
							title: '立花 泷',
							url: '',
						}
					]
				},

				members: [
					{
						id: 1,
						avatar: '/static/image/mem/2.jpg',
						gender: 2, // 1：female，2：male
						nickName: '立花 泷',
						region: '东京',
						photo: '/static/image/mem/2.jpg',
						birth: '2000-10-27',
						height: 170,
						weight: 75,
						university: ''
					},

					{
						id: 2,
						avatar: '/static/image/mem/1.jpg',
						gender: 1, // 1：female，2：male
						nickName: '宫水 三叶',
						region: '岐阜县 糸守町',
						photo: '/static/image/mem/1.jpg',
						birth: '2000-4-16',
						height: 160,
						weight: 50,
						university: ''
					},
				]
			}
		},
		
		methods: {

			openMemberDetailsAlarm(id) {
				console.log(id);
				
				console.log('打开详情页');

				this.$refs.memberDetails.openAlarmBox(id);
			}
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 750rpx;
		margin-bottom: 20rpx;
	}
	.swiper {
		height: 350rpx;
	}
	.swiper-item {
		display: block;
		height: 350rpx;
		line-height: 350rpx;
		text-align: center;
	}
	
	.swiper-item-1 { background: #f00; }
	.swiper-item-2 { background: #18cd6f; }
	.swiper-item-3 { background: #1792f2; }
	
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt{
		margin-top:60rpx;
		position:relative;
	}
	.info {
		position: absolute;
		right:20rpx;
	}
	.uni-padding-wrap {
		width:550rpx;
		padding:0 100rpx;
	}
	
	.home { background: #f5f5f5; }
	
	.member-list { padding: 0 20rpx; }
	
	.member-list-item { margin-bottom: 20rpx; padding: 20rpx; }
	
	.member-avatar { width: 90rpx; height: 90rpx; }
</style>
